<template>
	<view class="commentPopular-page">
		<u-popup :round="30" :safeAreaInsetBottom="false" :closeOnClickOverlay="false" :closeable="true" mode="bottom"
			:show="show" @close="close">
			<view class="commentPopular-page-content">
				<view class="page-content-top">
					<view class="content-top-nav">
						<img :src="querstval.user?.avatar?.url?querstval.user?.avatar?.url:queryIcon('modelone1') "
							alt="" class="top-nav-img">
						<span>{{querstval.user?.nickname}}</span>
					</view>
					<view class="content-top-text">
						<span>{{querstval.content}}</span>
					</view>
					<view class="content-top-bootm">
						<span class="content-top-bootmtext" @click="focumy">评论</span>
						<span>此回答</span>
					</view>
				</view>
				<view class="page-content-body" v-if="commentList.length>0">
					<view class="content-body-list" v-for="(item,index) in commentList" :key="item.id">
						<view class="body-list-content"
							@click="commentClick(item.id, item.user.id, item.user.nickname, index)">
							<view class="content-nav">

								<img :src="item.user?.avatar?.url?item.user?.avatar?.url:queryIcon('modelone1') " alt=""
									class="content-nav-img">
								<span>{{item.user?.nickname}}</span>
							</view>
							<view class="content-text">
								<span>{{item.content}}</span>
							</view>
							<view class="content-bottom">
								<view class="content-bottom-left">
									<span>{{ $utils.dateFormat(item.created_at,"yyyy-MM-dd hh:mm:ss") }}</span>
								</view>
								<view class="content-bottom-right">
									<view class="bottom-right-left"
										@click.stop="dianzan(index, item.id, item?.visits[0])">
										<img :src="(item?.visits[0]?.is_like)?queryIconImage('questiondetalogo4cative'):queryIconImage('questiondetalogo4')"
											alt=""
											style="width: 40rpx;height: 40rpx;margin-right: 5rpx;margin-bottom: 4rpx;">

										<span>{{item.zanlink}}</span>
									</view>

								</view>

							</view>
							<view class="bottom-right-left2" @click.stop="commentReplyShow(index, item.id)">

								<span v-if="item?.children?.length > 0" class="zhankai"
									style="font-size: 20rpx;color: #666666;">——展开{{item?.children?.length || 0 }}条回复▾</span>
							</view>
						</view>
						<view class="body-list-contentchailde"
							v-if="item?.children?.length > 0 && commentList[index].id == clickId && flag == false">
							<view class="contentchailde-content">
								<view v-for="(v,i) in item.children" :key="v.id"
									@click="focusinput(v.id, v.user.id, v.user.nickname, true, item.id, index)">
									<view class="content-nav">
										<img :src="v.user?.avatar?.url?v.user?.avatar?.url:queryIcon('modelone1') "
											alt="" class="content-nav-img">
										<span
											v-if="v.reply">{{v.user?.nickname}}&nbsp;&nbsp;&nbsp;&nbsp;回复:&nbsp;{{item.user?.nickname}}</span>
										<!-- <span>{{v.user?.nickname}}</span> -->
									</view>
									<view class="content-text">
										<span>{{v.content}}</span>
									</view>
									<view class="content-bottom">
										<view class="content-bottom-left">
											<span>{{ $utils.dateFormat(v.created_at,"yyyy-MM-dd hh:mm:ss") }}</span>
										</view>
										<view class="content-bottom-right">
											<view class="bottom-right-left"
												@click.stop="changezantwo(index,v.id,v.visits)">
												<img :src="(v.visits?.is_like)?queryIconImage('questiondetalogo4cative'):queryIconImage('questiondetalogo4')"
													alt=""
													style="width: 40rpx;height: 40rpx;margin-right: 5rpx;margin-bottom: 4rpx;">
												<span>{{v.zanlink}}</span>
											</view>
										</view>
									</view>
								</view>

								<!-- <view @click="focusinput(v.id, v.user_user,true, item.id, index)"
									v-for="m in item.children">
									<view class="content-nav">
										<img :src="m.user?.avatar?.url?m.user?.avatar?.url:queryIcon('modelone1') "
											alt="" class="content-nav-img">
										<span
											v-if="v.reply">{{v.user?.nickname}}&nbsp;&nbsp;&nbsp;&nbsp;回复:&nbsp;{{v.reply?.nickname}}</span>
										
									</view>
									<view class="content-text">
										<span>{{m.content}}</span>
									</view>
									<view class="content-bottom">
										<view class="content-bottom-left">
											<span>{{ $utils.dateFormat(m.created_at,"yyyy-MM-dd hh:mm:ss") }}</span>
										</view>
										<view class="content-bottom-right">
											
											<view class="bottom-right-left"
												@click.stop="changezantwo(index,v.id,v.visits)">
												<img :src="(m.visits?.is_like)?queryIconImage('questiondetalogo4cative'):queryIconImage('questiondetalogo4')"
													alt=""
													style="width: 40rpx;height: 40rpx;margin-right: 5rpx;margin-bottom: 4rpx;">
												<span>{{v.zanlink}}</span>
											</view>
										</view>
									</view>
								</view> -->
							</view>

						</view>

					</view>
					<view class="content-body-no">
						<span>— 没有更多评论了 —</span>
					</view>
				</view>

				<!-- 没有评论的界面 -->
				<view class="page-content-body-two" v-else>
					<view class="body-two-midel">
						<img mode="aspectFill" :src="queryNoDataIconImage(`commpopular`)" alt=""
							style="width: 260rpx;height: 288rpx;">
						<p>暂无评论</p>
					</view>
				</view>
				<view class="page-content-flexd">
					<view class="content-flexd-content">
						<img :src="userimg" alt="" class="top-nav-img">
						<input @blur="blurfocus" :focus="focuslean" v-model="inputval" class="uni-input"
							@confirm="getnewcomment" placeholder-style="color:#999999" :placeholder="inputpleac"
							style="font-size: 26rpx;font-family: Source Han Sans CN-Bold, Source Han Sans CN;font-weight: 700;color: #999999;line-height: 42rpx;"
							width="80%" />
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		Time
	} from "../../utils/timenew.js"
	import methods from "./methods.js"
	export default {
		name: "commentPopular",
		props: {
			commentshow: {
				type: Boolean
			},
			answerId: {
				type: Number
			},
			querstval: {
				type: Object,
				default: () => {}
			},
			articleId: {
				type: Number
			},
			userimg: {
				type: String
			}
		},
		data() {
			return {
				blean: true,
				bleanswich: false, //判断是否为回复评论
				username: '',
				currentIndex: -1,
				chaildeblean: false,
				inputpleac: '写下你的评论..',
				focuslean: false,
				inputval: '',
				show: false,
				clickId: 0,
				flag: false,
				chidekval: [],
				articleCommentlist: [],
				overindex: '',
				commentList: [], //评论列表
				userId: null,
				childerenlistindex: 0,
				childerenlist: [],

				focusid: '', //回复id
				articleCommentId: null, //文章评论id
				userId: null, //向谁进行评论的id
				userName: "", //向谁进行评论的名字
				commentIndex: null, //评论的index

			};
		},
		computed: {
			...mapState({
				headericon: state => state.remote?.headericon?.data_list ?? [],
				iconList: state => state.remote?.iconList?.data_list ?? [],
				nodataicon: state => state.remote?.nodataicon?.data_list ?? [],
			})
		},
		methods: {
			...methods,
			queryIcon(label, key = "headericon") {
				return this[key]?.find(res => res?.label == label)?.img?.url;
			},
			queryIconImage(label, key = "iconList") {
				return this[key]?.find(res => res?.label == label)?.img?.url;
			},
			queryNoDataIconImage(label, key = "nodataicon") {
				return this[key]?.find(res => res?.label == label)?.img?.url;
			},
			//获取评论列表
			getCommentInfo(articleId, answerId) {
				// this.$store.dispatch('remote/callActionflowOffset', {
				// 	response_key: "commentInfo",
				// 	key: "list",
				// 	isOffset: false,
				// 	actionflow_name: "文章_评论查询",
				// 	payload: {
				// 		articleId: articleId, //文章id
				// 		articleComment: answerId,
				// 		operate: "2",
				// 	},
				// }).then(res => {
				// 	console.log("res",res);
				// 	// this.commentList = this.groupArr(res.data_list)
				// 	// console.log('评论详情',this.commentList)
				// })
				let userid = uni.getStorageSync('userInfo').id
				this.$store.dispatch("remote/query", {
					model: "article_comment",
					field_string: `article_comment_parent_article_comment 
									
									visits:article_comment_visits(where:{user_user:{_eq:${userid}}}) {is_collect is_like} 
									article_article zanlink article_comment_reply_id content user{id nickname avatar{url}} reply:article_comment{user{id nickname avatar{url}}}  `,
					limit: -1,
					order_by: {
						created_at: "desc"
					},
					where: {
						article_article: {
							_eq: articleId
						}
					}
				}).then(res => {
					console.log("this.commentList", res);
					// let parentIdList = {};
					// res.data_list.forEach((item) => {
					// 	let parentId = item.article_comment_parent_article_comment;
					// 	if (!parentIdList[parentId]) {
					// 		parentIdList[parentId] = [];
					// 	}
					// 	parentIdList[parentId].push(item);
					// });

					// let firtList = res.data_list.filter(rs => rs.article_comment_parent_article_comment == null)
					// for (let key in parentIdList) {
					// 	for (let kkey in parentIdList) {
					// 		parentIdList[key].map(item => {
					// 			if (item.id == kkey ) {
					// 				parentIdList[key].push(...parentIdList[kkey])
					// 				// delete parentIdList[kkey]
					// 			}
					// 		})
					// 	}
					// }

					// // parentIdList[this.querstval.id].push(JSON.parse( JSON.stringify(this.querstval)))
					// console.log(parentIdList[this.querstval.id].slice(0));
					this.commentList = this.groupArr(res.data_list)


				})

			},
			//获取回复

			groupArr(list) {
				let parentIdListtemp = {};
				let firtList = list.filter(rs => rs.article_comment_parent_article_comment == null)
				list.forEach((item) => {
					let parentId = item.article_comment_parent_article_comment;
					if (!parentIdListtemp[parentId]) {
						parentIdListtemp[parentId] = [];
					}
					parentIdListtemp[parentId].push(item);
				});
				delete parentIdListtemp["null"]
				console.log(parentIdListtemp);
				for (let key in parentIdListtemp) {
					for (let kkey in parentIdListtemp) {
						parentIdListtemp[key].map(item => {
							if (item.id == kkey) {
								parentIdListtemp[key].push(...parentIdListtemp[kkey])
								delete parentIdListtemp[kkey]
							}
						})
					}
				}
				let newArr = parentIdListtemp[this.querstval.id]
				let newObj = {}
				let newList = []
				if (newArr) {
					newArr.forEach((item) => {

						let newObjparentId = item.article_comment_parent_article_comment;
						if (!newObj[newObjparentId]) {
							newObj[newObjparentId] = [];
						}
						newObj[newObjparentId].push(item);
					});

					newList.push(...newObj[this.querstval.id])
					delete newObj[this.querstval.id]
					for (let key in newObj) {
						for (let kkey in newObj) {
							newObj[key].map(rs => {
								if (rs.id == kkey) {
									newObj[key].push(...newObj[kkey])
								}
							})
						}
					}
				}

				newList.map(rs => {
					for (let key in newObj) {
						if (rs.id == key) {
							if (!rs.children) {
								rs.children = []
							}
							rs.children.push(...newObj[key])
						}
					}
				})

				console.log("1111", newList);
				return newList
			},
			getCommentData(articleId, id) {
				this.$store.dispatch('remote/callActionflowOffset', {
					response_key: "commentInfo",
					key: "list",
					isOffset: false,
					actionflow_name: "文章_评论查询",
					payload: {
						articleId: articleId, //文章id
						articleComment: id,
						operate: "3",
					},
				}).then(res => {
					console.log(res)
					let list = JSON.parse(JSON.stringify(res.data_list))
					let arrComment = []
					list.map(item => {
						item.article_comment.length && item.article_comment.map(i => {
							arrComment.push(i)
						})
					})
					let comment = list.concat(arrComment)
					// this.childerenlist = comment
					console.log('回复评论详情', comment)
				})
			},

			//评论
			commentClick(articleCommentId, userId, userName, index) {
				console.log(articleCommentId, userId, userName, index)
				this.focuslean = true
				this.articleCommentId = articleCommentId
				this.userId = userId
				this.inputpleac = `@${userName}`
				this.commentIndex = index
				if (!this.commentList[index].article_comment) {
					this.commentList[index].article_comment = []
				}
			},
			//回复
			focusinput(id, userId, name, bb, articleCommentId, index) {
				this.commentIndex = index
				this.articleCommentId = articleCommentId
				console.log(id, userId, name, bb, articleCommentId)
				if (bb) {
					this.bleanswich = bb
				}
				this.focuslean = true
				this.userName = name
				this.userId = userId
				this.focusid = id
				this.inputpleac = `@${name}`
			},
			//点赞
			dianzan(index, id, like) {
				console.log("121212", index, id, like);
				if (like?.is_like) {
					//取消
					this.$store.dispatch('app/runActionflowmain', {
						args: {
							actionflow_name: "文章_添加评论",
							payload: {
								operate: 5, //1:进行留言  2:向答主留言进行评论  3:进行回复  4:进行点赞  5.取消点赞  6.进行收藏  7.取消收藏   
								articleId: this.articleId, //文章id
								articleCommentId: id, //答主评论id
							},
						},
					}).then(res => {
						this.getCommentInfo(this.articleId, this.answerId)
					})

				} else {
					//点赞
					this.$store.dispatch('app/runActionflowmain', {
						args: {
							actionflow_name: "文章_添加评论",
							payload: {
								operate: 4, //1:进行留言  2:向答主留言进行评论  3:进行回复  4:进行点赞  5.取消点赞  6.进行收藏  7.取消收藏   
								articleId: this.articleId, //文章id
								articleCommentId: id, //答主评论id
							},
						},
					}).then(res => {
						this.getCommentInfo(this.articleId, this.answerId)
					})
				}
			},
			changezantwo(index, id, like) {
				if (like?.is_like) {
					//取消
					this.$store.dispatch('app/runActionflowmain', {
						args: {
							actionflow_name: "文章_添加评论",
							payload: {
								operate: 5, //1:进行留言  2:向答主留言进行评论  3:进行回复  4:进行点赞  5.取消点赞  6.进行收藏  7.取消收藏   
								articleId: this.articleId, //文章id
								articleCommentId: id, //答主评论id
							},
						},
					}).then(res => {
						this.getCommentInfo(this.articleId, this.answerId)
					})

				} else {
					//点赞
					this.$store.dispatch('app/runActionflowmain', {
						args: {
							actionflow_name: "文章_添加评论",
							payload: {
								operate: 4, //1:进行留言  2:向答主留言进行评论  3:进行回复  4:进行点赞  5.取消点赞  6.进行收藏  7.取消收藏   
								articleId: this.articleId, //文章id
								articleCommentId: id, //答主评论id
							},
						},
					}).then(res => {
						this.getCommentInfo(this.articleId, this.answerId)
					})
				}
			},
			//查看回复评论
			commentReplyShow(index, id) {
				console.log("####33333333333", id);
				if (this.clickId == 0) {
					this.clickId = id

				} else {
					this.clickId = 0

				}
			},
			chaildesweichlist(id, name, index) {
				if (this.childerenlistindex == index) {
					this.chaildeblean = this.chaildeblean ? false : true
				} else {
					this.childerenlistindex = index
					this.chaildeblean = true
				}
				this.childerenlist = []
				// this.granpql(id, name)
				// this.getCommentData(this.articleId,id,index)


				console.log(id, name, index)
			},
			//评论
			getnewcomment() {
				this.focuslean = false
				//判断是否输入评论
				if (this.inputval) {
					//判断是否是回复评论
					if (this.bleanswich) {
						this.$store.dispatch('app/runActionflowmain', {
							args: {
								actionflow_name: "文章_添加评论",
								payload: {
									operate: 3, //1:进行留言  2:向答主留言进行评论  3:进行回复  4:进行点赞  5.取消收藏  6.进行收藏  7.取消收藏   
									articleId: this.articleId, //文章id
									articleCommentId: this.focusid, //评论id，由两种答主评论id和答主评论回复id
									reply_user: this.userId, //向谁进行的评论
									articleComment_replyId: this.articleCommentId, //向那条评论进行的id
									content: this.inputval, //内容
								},
							},
						}).then(res => {
							if (res.status == '成功') {
								uni.showToast({
									icon: 'success',
									title: '发表评论成功'
								}, 1000)
								this.inputval = ''
								// this.commentList[this.commentIndex].article_comment.push(res.data.data)
								this.commentList.push(res.data.data)
								this.getCommentInfo(this.articleId, this.answerId)
							}
						})
					} else {
						if (this.articleCommentId) {
							this.$store.dispatch('app/runActionflowmain', {
								args: {
									actionflow_name: "文章_添加评论",
									payload: {
										operate: 3, //1:进行留言  2:向答主留言进行评论  3:进行回复  4:进行点赞  5.取消收藏  6.进行收藏  7.取消收藏   
										articleId: this.articleId, //文章id
										articleCommentId: this.articleCommentId, //评论id，由两种答主评论id和答主评论回复id
										reply_user: this.userId, //向谁进行的评论
										articleComment_replyId: this.articleCommentId, //向那条评论进行的id
										content: this.inputval, //内容
									},
								},
							}).then(res => {
								if (res.status == '成功') {
									uni.showToast({
										icon: 'success',
										title: '发表评论成功'
									}, 1000)
									this.inputval = ''
									// this.commentList[this.commentIndex].chaildeblean = true
									// this.commentList[this.commentIndex].replyIndex = this.commentIndex
									// this.commentList[this.commentIndex].article_comment.push(res.data.data)
									// this.getCommentInfo(this.articleId, this.answerId)
									this.commentList.push(res.data.data)
									this.getCommentInfo(this.articleId, this.answerId)
								}
							})
						} else {
							this.$store.dispatch('app/runActionflowmain', {
								args: {
									actionflow_name: "文章_添加评论",
									payload: {
										operate: 2, //1:进行留言  2:向答主留言进行评论  3:进行回复  4:进行点赞  5.取消收藏  6.进行收藏  7.取消收藏   
										articleId: this.articleId, //文章id
										articleCommentId: this.answerId, //答主评论id
										content: this.inputval, //内容
									},
								},
							}).then(res => {
								if (res.status == '成功') {
									uni.showToast({
										icon: 'success',
										title: '发表评论成功'
									}, 1000)
									this.inputval = ''
									this.commentList.push(res.data.data)
									this.getCommentInfo(this.articleId, this.answerId)
								}
							})
						}
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: '请输入你的评论'
					}, 1000)
				}

			},
			close() {
				this.show = false
				this.$emit('commentPoluaremit', false)
			},
		},
		watch: {
			commentshow(val) {
				this.show = val
				if (val) {
					this.getCommentInfo(this.articleId, this.answerId)
				}

			},
		}
	}
</script>

<style lang="scss">
	.commentPopular-page {
		width: 100%;
		height: 100%;

		.commentPopular-page-content {
			width: 100%;
			border-radius: 30rpx 30rpx 0rpx 0rpx;
			height: 78vh;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			// position: relative;

			.page-content-top {
				width: 100%;
				border-bottom: 1rpx solid #ccc;
				height: 223rpx;
				box-sizing: border-box;
				padding: 30rpx 70rpx 0 28rpx;

				.content-top-nav {
					width: 100%;
					display: flex;
					align-items: center;
					font-size: 26rpx;
					font-family: Source Han Sans CN-Bold, Source Han Sans CN;
					font-weight: 700;
					color: #567895;
					line-height: 42rpx;

					.top-nav-img {
						width: 50rpx;
						height: 50rpx;
						border-radius: 50rpx 50rpx 50rpx 50rpx;
						overflow: hidden;
						margin-right: 12rpx;
					}
				}

				.content-top-text {
					width: 100%;
					margin-top: 12rpx;
					margin-bottom: 23rpx;
					font-size: 30rpx;
					font-family: Alibaba PuHuiTi 2.0-55 Regular, Alibaba PuHuiTi 20;
					font-weight: 400;
					color: #999999;
					line-height: 50rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.content-top-bootm {
					width: 100%;
					font-size: 24rpx;
					font-family: Source Han Sans CN-Bold, Source Han Sans CN;
					font-weight: 600;
					color: #999999;
					line-height: 42rpx;

					.content-top-bootmtext {
						font-size: 30rpx;
						font-family: Source Han Sans CN-Bold, Source Han Sans CN;
						font-weight: 700;
						color: #000000;
						line-height: 42rpx;
						display: inline-block;
						margin-right: 8rpx;
					}
				}
			}

			.page-content-body-two {
				width: 100%;
				flex: 1;
				box-sizing: border-box;
				padding: 0 27rpx;
				padding-bottom: 140rpx;
				overflow: hidden;
				overflow-y: auto;
				display: flex;
				justify-content: center;

				.body-two-midel {
					margin: auto;
					font-size: 30rpx;
					font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
					font-weight: 500;
					color: #4A4A4A;
					line-height: 42rpx;
					text-align: center;
				}
			}

			.page-content-body {
				width: 100%;
				flex: 1;
				box-sizing: border-box;
				padding: 0 27rpx;
				padding-bottom: 140rpx;
				overflow: hidden;
				overflow-y: auto;

				.content-body-list {
					width: 100%;
					margin-top: 27rpx;

					.body-list-content {
						width: 100%;

						.bottom-right-left2 {
							padding: 7rpx 0;

						}

						.content-nav {
							display: flex;
							align-items: center;
							font-size: 24rpx;
							font-family: Source Han Sans CN-Regular, Source Han Sans CN;
							font-weight: 400;
							color: #666666;
							line-height: 50rpx;

							.content-nav-img {
								width: 50rpx;
								height: 50rpx;
								border-radius: 50rpx 50rpx 50rpx 50rpx;
								margin-right: 12rpx;
							}
						}

						.content-text {
							width: 100%;
							font-size: 24rpx;
							font-family: Alibaba PuHuiTi 2.0-55 Regular, Alibaba PuHuiTi 20;
							font-weight: 400;
							color: #333333;
							line-height: 40rpx;
							margin: 10rpx 0;
						}

						.content-bottom {
							width: 100%;
							box-sizing: border-box;
							padding-right: 10rpx;
							display: flex;
							justify-content: space-between;

							.content-bottom-left {
								font-size: 24rpx;
								font-family: Source Han Sans CN-Regular, Source Han Sans CN;
								font-weight: 400;
								color: #999999;
								line-height: 45rpx;
							}

							.content-bottom-right {
								width: 80rpx;
								display: flex;
								align-items: center;
								font-size: 24rpx;
								font-family: Source Han Sans CN-Regular, Source Han Sans CN;
								font-weight: 400;
								color: #999999;
								line-height: 45rpx;

								.bottom-right-left {
									width: 80%;
									display: flex;
									align-items: center;
								}
							}
						}
					}

					.body-list-contentchailde {
						width: 100%;

						.contentchailde-content {
							width: 100%;
							margin-top: 20rpx;
							background-color: #EEEEEE;
							box-sizing: border-box;
							padding: 20rpx 20rpx 24rpx 20rpx;
							border-radius: 15rpx;

							.content-nav {
								display: flex;
								align-items: center;
								font-size: 24rpx;
								font-family: Source Han Sans CN-Regular, Source Han Sans CN;
								font-weight: 400;
								color: #666666;
								line-height: 50rpx;

								.content-nav-img {
									width: 50rpx;
									height: 50rpx;
									border-radius: 50rpx 50rpx 50rpx 50rpx;
									margin-right: 12rpx;
								}
							}

							.content-text {
								width: 100%;
								font-size: 24rpx;
								font-family: Alibaba PuHuiTi 2.0-55 Regular, Alibaba PuHuiTi 20;
								font-weight: 400;
								color: #333333;
								line-height: 40rpx;
								margin: 10rpx 0;
							}

							.content-bottom {
								width: 100%;
								// box-sizing: border-box;
								// padding: 0 19rpx 0 20rpx;
								display: flex;
								justify-content: space-between;

								.content-bottom-left {
									font-size: 24rpx;
									font-family: Source Han Sans CN-Regular, Source Han Sans CN;
									font-weight: 400;
									color: #999999;
									line-height: 45rpx;
								}

								.content-bottom-right {
									width: 100rpx;
									display: flex;
									align-items: center;
									font-size: 24rpx;
									font-family: Source Han Sans CN-Regular, Source Han Sans CN;
									font-weight: 400;
									color: #999999;
									line-height: 45rpx;

									.bottom-right-left {
										// width: 50%;
										display: flex;
										align-items: center;
									}
								}
							}

						}


					}
				}

				.content-body-no {
					font-size: 24rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					line-height: 35rpx;
					margin-top: 25rpx;
					width: 100%;
					text-align: center;
				}
			}

			.page-content-flexd {
				width: 100%;
				box-sizing: border-box;
				padding: 0 27rpx;
				padding-bottom: 40rpx;
				position: fixed;
				bottom: 0;
				z-index: 999;
				background-color: #fff;

				.content-flexd-content {
					width: 100%;
					height: 80rpx;
					background: #EEEEEE;
					border-radius: 15rpx 15rpx 15rpx 15rpx;
					display: flex;
					align-items: center;

					.top-nav-img {
						width: 50rpx;
						height: 50rpx;
						border-radius: 50rpx 50rpx 50rpx 50rpx;
						margin-left: 20rpx;
						margin-right: 20rpx;
					}
				}
			}
		}
	}
</style>